<template>
    <div class="searchlist">
        <!-- 搜索框 -->
    <div class="searchArea">
      <mt-search
        v-model="searchkey"
        placeholder="搜索"
      > </mt-search>
      <mt-button
        size="small"
      >搜索</mt-button>
    </div>
    <!-- 导航栏 -->
    <div class="nav_sorder">
        <a href="javascript:;" @click="isActive=!isActive;isc=0" :class="{'active':isc===0}">
            上架时间
            <span :class="{'fa':true, 'fa-angle-down':isActive,'fa-angle-up':!isActive}"></span>
        </a>
        <a href="javascript:;" @click="handlerPrice" :class="{'active':isc===1}">
            价格
            <span :class="{'fa':true, 'fa-angle-down':hasPrice,'fa-angle-up':!hasPrice}"></span>
        </a>
        <!-- <a href="javascript:;"  @click="handlerShow" :class="{'active':isc===1}"> -->
        <a href="javascript:;">
            销量
            <span :class="{'fa':true, 'fa-angle-down':hasShow,'fa-angle-up':!hasShow}"></span>
        </a>
        <a href="javascript:;">
            折扣
            <span class="fa fa-angle-down"></span>
        </a>
    </div>
    <!-- 商品信息 -->
    <mt-loadmore
      :autoFill='false'
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
    >
    <ul>
        <li  v-for="item in searchList" :key="item.id">
            <router-link :to="'/productDetail/'+item.id">
                <img :src="'http://127.0.0.1:3000'+item.pic[0].picAddr" alt="">
                <p>{{item.proName}}</p>
                <div class="price">
                    <span>&yen;{{item.price}}</span>
                    <del>&yen;{{item.oldPrice}}</del>
                </div>
                <mt-button type="primary">立即购买</mt-button>
            </router-link>
        </li>
    </ul>
    </mt-loadmore>
    </div>
</template>
<script>
import {getSearchData} from '@/api'
export default {
  data () {
    return {
      searchkey: '',
      isActive: true,
      isc: 0,
      hasPrice: false,
      hasShow: false,
      page: 1,
      pageSize: 10,
      // 搜索结果
      searchList: [],
      sort: {},
      allLoaded: false
    }
  },
  methods: {
    handlerPrice () {
      this.isc = 1
      this.isActive = true
      this.hasPrice = !this.hasPrice
      // 实现排序操作
      this.searchList.length = 0
      var psort = this.hasPrice ? 2 : 1
      // 清除当前sort对象的所有属性值
      this.sort = {}
      this.sort['price'] = psort
      this.page = 1
      this.init()
    },
    init () {
      // 调用接口，渲染数据
      getSearchData({page: this.page, pageSize: this.pageSize, ...this.sort})
        .then(res => {
        //   console.log(res)
          if (res.data.length === 0) {
            this.allLoaded = true// 若数据已全部获取完毕
          }
          // ...是展开运算符，可以将一个数组中的成员一个一个展开为单个的元素
          this.searchList.push(...res.data)
        })
    },
    loadBottom () {
      this.page++
      this.init()
      this.$refs.loadmore.onBottomLoaded()
    }
  },
  mounted () {
    // 设置标题
    this.$store.state.title = '商品搜索列表'
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.searchlist {
    // 搜索框
    .searchArea {
        position: relative;
        .mint-search {
        height: auto;
        }
        .mint-button--small {
        height: 29px;
        border-radius: 0 4px 4px 0;
        background-color: skyblue;
        position: absolute;
        right: 3px;
        top: 7px;
        z-index: 999;
        color: #333;
        }
    }
    // 导航栏
    .nav_sorder {
        width: 100%;
        display: flex;
        margin-top: 5px;
        a {
            flex: 1;
            text-align: center;
            line-height: 26px;
            background-color: #ddd;
            font-size: 14px;
        }
        .active{
            background-color: orange;
        }
    }
   // 商品部分
    ul {
        padding: 10px;
        width: 100%;
        li {
            width: 49%;
            border: 1px solid #ddd;
            box-shadow: 0px 0px 2px #ccc;
            float: left;
            margin-bottom: 10px;
            img {
                width: 100%;
                display: block;
            }
            p {
                font-size: 14px;
                padding: 0px 10px;
                color:#666;
                display: -webkit-box;
                overflow: hidden;
                white-space: normal !important;
                text-overflow: ellipsis;
                word-wrap: break-word;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 18px;
            }
            .price {
                text-align: center;
                font-size: 14px;
                padding-top: 5px;
                span{
                    color:#e92322;
                }
                del {
                    color: #888;
                    font-size: 13px;
                }
            }

            button {
                display: block;
                margin: 10px auto;
            }
        }
        li:nth-child(2n){
            margin-left: 2%;
        }
    }
}
</style>
